<template>
    <!-- 个人中心 -->
    <div>
        <div class="box">
            <div class="back" style="text-align: left;">
                <el-button @click="ToBack">返回</el-button>
            </div>
            <div class="top">
                <div class="topleft">
                    <!-- 头像 -->
                    <div class="left"> <img :src="userList.img" alt=""></div>
                    <!-- 信息 -->
                    <div class="right">
                        <div>用户名：<span>{{ userList.username }}</span> </div>
                        <div>电话号码：<span>{{ userList.phone }}</span></div>
                        <div>地址：{{ userList.address }}<span></span></div>
                    </div>
                </div>

                <!-- 编辑区域 -->
                <div class="topright">
                    <el-button type="text" @click="dialogVisible = true">
                        <i class="el-icon-edit-outline"></i>编辑资料</el-button>
                </div>
                <!-- 弹出部分 -->
                <el-dialog title="个人信息" :visible.sync="dialogVisible" width="30%">

                    <el-upload class="avatar-uploader" action="http://localhost:8082/file/upload" :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <el-form ref="form" :model="form" label-width="80px">
                        <el-form-item label="用户名">
                            <el-input v-model="form.username"></el-input>
                        </el-form-item>
                        <el-form-item label="电话号码">
                            <el-input v-model="form.phone"></el-input>
                        </el-form-item>
                        <el-form-item label="收货地址">
                            <el-input v-model="form.address"></el-input>
                        </el-form-item>
                        <el-form-item label="密码">
                            <el-input type="password" v-model="form.password" show-password placeholder="请输入密码"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="update(form)">确 定</el-button>
                    </span>
                </el-dialog>
            </div>

            <div class="bottom">
                <el-tabs v-model="activeName">
                    <!--  全部订单 -->
                    <el-tab-pane label="全部订单" name="first">
                        <el-table :data="orderList">
                            <!-- <el-table-column type="selection" align="center" width="50"></el-table-column> -->
                            <el-table-column label="商品图片" width="180">
                                <template slot-scope="scope">
                                    <template v-for="item in scope.row.orderItem">
                                        <img :src="item.img" alt="" style="width: 100px; height: 70px;"
                                            @click="toPayment(scope.row)" class="change">
                                    </template>
                                </template>
                            </el-table-column>
                            <el-table-column label="订单编号" prop="uid"></el-table-column>
                            <el-table-column label="订单状态" prop="state">
                                <template v-slot="scope">
                                    <el-tag type="warning"
                                        v-if="scope.row.state == null || scope.row.state == 0">待支付</el-tag>
                                    <el-tag type="success" v-if="scope.row.state == 1">已支付</el-tag>
                                    <el-tag type="success" v-if="scope.row.state == 3">已发货</el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" fixed="right" align="center">
                                <template slot-scope="scope">
                                    <el-button size="medium" type="danger" v-on:click="delGood(scope.row.id)">取消</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <!-- 待发货 -->
                    <el-tab-pane label="待发货" name="third">

                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

    </div>
</template>
<script>
import headerTop from '@/components/headerTop.vue';
import { getCart, deleteShopping } from '@/api/cart'
import { userMessage, updateUser } from '@/api/user';
import { getOrderAll, deleteOrder } from '@/api/order'
export default {
    name: "shopCart",
    data() {
        return {
            //选中数据
            selectionData: [],
            // 购物车列表
            cartList: [],
            // 加载
            loading: false,
            // 购物车总数
            cartTotalCount: 0,
            // 购物车总价格
            cartTotalPrice: 0.0,
            // 是否全选
            isAllChecked: false,
            activeName: 'first',
            radio: '1',
            imageUrl: 'https://m.360buyimg.com/babel/jfs/t20261011/131631/4/40025/129320/6527bdedF8c958d25/814ee4169a74986a.jpg',
            dialogVisible: false,
            form: [],
            userList: [],
            userId: 0,
            orderList: [],
            isShow: 0
        };
    },

    created() {
        let _this = this;
        // 初始化数据
        _this.initData();
        this.getList()
        this.UserMessage()
        this.getOrder()
    },
    mounted() {
        let _this = this;
        // 自适应
        // _this.resizeLayout();
        // window.onresize = function () {
        //     _this.resizeLayout();
        // };
    },
    methods: {

        ToBack() {
            this.$router.go(-1)
        },
        handleAvatarSuccess(res) {
            this.imageUrl = res
            console.log(res)
        },


        // 初始化数据
        initData() {
            let _this = this;
            _this.getList();
        },

        // 获取购物车列表
        getList() {
            let id = this.$route.query.userId
            let _this = this;
            if (id == 0) {
                this.$message.error("当前没有登录！请前往登录")
            } else {
                getCart(id).then(res => {
                    _this.cartList = res.data
                })
            }

        },



        //获取用户信息
        UserMessage() {
            this.userId = this.$route.query.userId
            userMessage(this.userId).then(res => {
                this.userList = res.data
                this.imageUrl = res.data.img
                this.form = res.data
                console.log(this.userList)
            })
        },

        //修改信息
        update(data) {
            var arr = {
                id: this.userId,
                username: data.username,
                phone: data.phone,
                img: this.imageUrl,
                address: data.address
            }
            updateUser(arr).then(res => {
                this.$message.success("用户信息修改成功")
                this.dialogVisible = false
                this.UserMessage()
            })
        },

        //获取订单信息
        getOrder() {
            let userId = this.userId;
            getOrderAll(userId).then(res => {
                this.orderList = res.data
                console.log(res)
            })
        },

        toPayment(item) {
            var data = JSON.stringify(item)
            // console.log(data)
            this.$router.push({
                query: {
                    item: data
                },
                path: "payment"
            })
        },

        delGood(id) {

            this.$confirm("确定要删除此订单吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(() => {
                deleteOrder(id).then(res => {
                    this.$message.success("删除成功")
                    this.getOrder()
                })
            })

                .catch((e) => {
                    console.log(e);
                });
        },


        change() {
            this.cursorStyle.cursor = 'pointer';
        }

    }
};
</script>
<style scoped>
.box {
    width: 1200px;
    margin: 60px auto;
}

.top {
    margin: 0 auto;
    width: 65%;
    height: 150px;
    /* background-color: rgb(206, 231, 172); */
    margin-bottom: 10px;
    display: flex;
    padding: 20px;
    box-shadow: 3px 10px 17px 0px #cbcbcb;
    justify-content: space-between;
}

/* 上边头像 */
.top .topleft {
    display: flex;
    width: 380px;
    height: 140px;
    /* background-color: aqua; */
    margin-right: 20px;

}

.left img {
    width: 140px;
    height: 140px;
    border-radius: 50%;
}

/* 资料左边 */
.right {
    text-align: left;
    color: rgb(105, 101, 101);
    font-family: 'Times New Roman', 'sans-serif', 宋体, 楷体;
    margin-left: 20px;
}

.right div {
    margin-top: 10px;
}


/* 编辑 */

.topright {
    margin-right: 10px;
}

.el-button--text {
    border-color: transparent;
    color: #409EFF;
    background: 0 0;
    padding-left: 0;
    font-size: 16px;
    padding-right: 0;
    font-family: 'Times New Roman', 'sans-serif', 宋体, 楷体;
}

/* 编辑头像 */
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/* 下方的栏 */
.bottom {
    width: 65%;
    margin: 0 auto;
    /* background-color: blue; */
}

/* 全部订单 */
/* 删除按钮 */
.el-button--small {
    padding: 9px 15px;
    float: left;
    font-size: 12px;
    border-radius: 3px;
}

/* 待支付 */
.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-top: 5px;
    margin-left: 0px;
}

.order_item {
    display: flex;
}

.el-button+.el-button,
.el-checkbox.is-bordered+.el-checkbox.is-bordered {
    margin-top: 5px;
    margin-left: 10px;
}

.change:hover {
    cursor: pointer;
}
</style>

